<template>
    <div class="ecological-container page-container">

        <!-- 主体内容区 -->
        <div class="main-content">
            <!-- 左侧面板 -->
            <div class="left-panel">
                <div class="panel-item">
                    <div class="panel-title">
                        <span class="icon">🌤️</span>
                        空气质量监测
                    </div>
                    <div class="air-quality-chart" ref="airQualityChart"></div>
                </div>
                <div class="panel-item">
                    <div class="panel-title">
                        <span class="icon">💧</span>
                        水质监测数据
                    </div>
                    <div class="water-quality-chart" ref="waterQualityChart"></div>
                </div>
            </div>

            <!-- 中间面板 -->
            <div class="center-panel">
                <div class="ecological-map">
                    <el-carousel 
                        :interval="5000" 
                        height="600px"
                        indicator-position="outside"
                        :autoplay="true"
                        arrow="always"
                        class="ecological-carousel"
                    >
                        <el-carousel-item v-for="(item, index) in carouselData" :key="index">
                            <div class="carousel-content">
                                <el-image style="width: 100%; height: 100%;" fit="cover" :src="item.image" :alt="item.title"/>
                                <div class="carousel-caption">
                                    <h3>{{ item.title }}</h3>
                                    <p>{{ item.description }}</p>
                                </div>
                            </div>
                        </el-carousel-item>
                    </el-carousel>
                    <div class="news-ticker">
                        <div class="ticker-content">
                            <span v-for="(news, index) in newsData" :key="index" class="news-item">
                                {{ news }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧面板 -->
            <div class="right-panel">
                <div class="panel-item">
                    <div class="panel-title">
                        <span class="icon">🌿</span>
                        绿色空间分布
                    </div>
                    <div class="green-space-chart" ref="greenSpaceChart"></div>
                </div>
                <div class="panel-item">
                    <div class="panel-title">
                        <span class="icon">🏆</span>
                        生态建设成果
                    </div>
                    <div class="achievement-chart" ref="achievementChart"></div>
                </div>
            </div>
        </div>

        <!-- 底部区域 -->
        <div class="footer-section">
            <div class="news-panel">
                <div class="news-title">
                    <span class="icon">📰</span>
                    生态建设动态
                </div>
                <div class="news-content">
                    <div class="news-item" v-for="(news, index) in latestNews" :key="index">
                        <span class="news-time">{{ news.time }}</span>
                        <span class="news-text">{{ news.content }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import { ElCarousel, ElCarouselItem } from 'element-plus'
import bysImg from '@/assets/img/ecological/bys.png'
import lxhImg from '@/assets/img/ecological/lxh.png'
import hzsdImg from '@/assets/img/ecological/hzsd.png'
import zjstImg from '@/assets/img/ecological/zjst.png'



// 数据定义
const scoreData = ref([
    { value: '92.5', label: '生态宜居指数', trend: 'up', change: '2.3%', isHighlight: true },
    { value: '95.8%', label: '空气质量优良率', trend: 'up', change: '1.5%', isHighlight: false },
    { value: '98.2%', label: '水质达标率', trend: 'up', change: '0.8%', isHighlight: false }
])

const newsData = ref([
    '广州市新增城市公园5个，总面积达200万平方米',
    '珠江水质持续改善，达到国家地表水Ⅱ类标准',
    '全市森林覆盖率提升至42.3%，位居全国前列',
    '广州白云山生态修复工程完成，新增绿化面积50万平方米'
])

const achievementData = ref([
    { title: '城市公园数量', value: '256个', progress: 85 },
    { title: '人均绿地面积', value: '15.8㎡', progress: 92 },
    { title: '生态廊道长度', value: '1200km', progress: 78 }
])

const latestNews = ref([
    { time: '2024-03-20', content: '广州白云山生态修复工程完成，新增绿化面积50万平方米' },
    { time: '2024-03-19', content: '珠江新城中央公园二期工程启动，打造城市生态新地标' },
    { time: '2024-03-18', content: '广州市启动"千园之城"计划，三年内新增100个城市公园' }
])



// 轮播图数据
const carouselData = ref([
    {
        image: bysImg,
        title: '白云山国家森林公园',
        description: '广州市最大的城市绿肺，森林覆盖率达95%'
    },
    {
        image: lxhImg,
        title: '珠江生态廊道',
        description: '打造"一江两岸"生态景观带，实现水清岸绿'
    },
    {
        image: hzsdImg,
        title: '海珠湿地公园',
        description: '城市中心区最大的湿地公园，生物多样性丰富'
    },
    {
        image: zjstImg,
        title: '流溪河国家森林公园',
        description: '广州市重要的生态屏障，森林资源丰富'
    }
])

// 图表实例
const airQualityChart = ref<HTMLElement | null>(null)
const waterQualityChart = ref<HTMLElement | null>(null)
const greenSpaceChart = ref<HTMLElement | null>(null)
const achievementChart = ref<HTMLElement | null>(null)

// 初始化图表
onMounted(() => {
    resize()
    // 空气质量图表
    if (airQualityChart.value) {
        const chart = echarts.init(airQualityChart.value)
        chart.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['PM2.5', 'PM10', 'O3', 'NO2', 'SO2'],
                textStyle: { color: '#fff' }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                axisLabel: { color: '#fff' }
            },
            yAxis: {
                type: 'value',
                axisLabel: { color: '#fff' }
            },
            series: [
                {
                    name: 'PM2.5',
                    type: 'line',
                    smooth: true,
                    data: [25, 22, 20, 18, 15, 12],
                    itemStyle: { color: '#00ff88' }
                },
                {
                    name: 'PM10',
                    type: 'line',
                    smooth: true,
                    data: [45, 40, 35, 30, 25, 20],
                    itemStyle: { color: '#00a1ff' }
                },
                {
                    name: 'O3',
                    type: 'line',
                    smooth: true,
                    data: [60, 55, 50, 45, 40, 35],
                    itemStyle: { color: '#ff6b6b' }
                },
                {
                    name: 'NO2',
                    type: 'line',
                    smooth: true,
                    data: [35, 32, 30, 28, 25, 22],
                    itemStyle: { color: '#ffd700' }
                },
                {
                    name: 'SO2',
                    type: 'line',
                    smooth: true,
                    data: [15, 14, 13, 12, 11, 10],
                    itemStyle: { color: '#9370db' }
                }
            ]
        })
    }

    // 水质监测图表
    if (waterQualityChart.value) {
        const chart = echarts.init(waterQualityChart.value)
        chart.setOption({
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                textStyle: { color: '#fff' }
            },
            series: [
                {
                    name: '水质达标率',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '20',
                            fontWeight: 'bold',
                            color: '#fff'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 98.2, name: '达标', itemStyle: { color: '#00ff88' } },
                        { value: 1.8, name: '未达标', itemStyle: { color: '#ff6b6b' } }
                    ]
                }
            ]
        })
    }

    // 绿色空间分布图表
    if (greenSpaceChart.value) {
        const chart = echarts.init(greenSpaceChart.value)
        chart.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['公园绿地', '防护绿地', '生产绿地', '其他绿地'],
                textStyle: { color: '#fff' }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: ['越秀区', '海珠区', '荔湾区', '天河区', '白云区'],
                axisLabel: { color: '#fff' }
            },
            yAxis: {
                type: 'value',
                axisLabel: { color: '#fff' }
            },
            series: [
                {
                    name: '公园绿地',
                    type: 'bar',
                    stack: 'total',
                    data: [320, 302, 301, 334, 390],
                    itemStyle: { color: '#00ff88' }
                },
                {
                    name: '防护绿地',
                    type: 'bar',
                    stack: 'total',
                    data: [120, 132, 101, 134, 90],
                    itemStyle: { color: '#00a1ff' }
                },
                {
                    name: '生产绿地',
                    type: 'bar',
                    stack: 'total',
                    data: [220, 182, 191, 234, 290],
                    itemStyle: { color: '#ff6b6b' }
                },
                {
                    name: '其他绿地',
                    type: 'bar',
                    stack: 'total',
                    data: [150, 232, 201, 154, 190],
                    itemStyle: { color: '#ffd700' }
                }
            ]
        })
    }

    // 生态建设成果图表
    if (achievementChart.value) {
        const chart = echarts.init(achievementChart.value)
        chart.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                axisLabel: { color: '#fff' }
            },
            yAxis: {
                type: 'category',
                data: ['城市公园数量', '人均绿地面积', '生态廊道长度', '森林覆盖率'],
                axisLabel: { color: '#fff' }
            },
            series: [
                {
                    name: '完成度',
                    type: 'bar',
                    data: [
                        { value: 85, itemStyle: { color: '#00ff88' } },
                        { value: 92, itemStyle: { color: '#00a1ff' } },
                        { value: 78, itemStyle: { color: '#ff6b6b' } },
                        { value: 88, itemStyle: { color: '#ffd700' } }
                    ],
                    label: {
                        show: true,
                        position: 'right',
                        formatter: '{c}%',
                        color: '#fff'
                    }
                }
            ]
        })
    }
})

const resize = () => {
    window.addEventListener('resize', () => {
        airQualityChart?.value?.echarts?.resize()
        waterQualityChart?.value?.echarts?.resize()
        greenSpaceChart?.value?.echarts?.resize()
        achievementChart?.value?.echarts?.resize()
    })
}

onUnmounted(() => {
    // 清理轮播图
    // 如果使用 Element Plus 的 el-carousel，需要清理轮播图的自动播放逻辑
    // 这里需要根据实际情况来清理
})
</script>

<style scoped lang="scss">
.ecological-container {
    width: 100%;
    background: linear-gradient(180deg, #001529 0%, #003366 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow: hidden;

    .header-section {
        .title {
            font-size: 32px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 20px;
            background: linear-gradient(90deg, #00ff88, #00a1ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;

            .title-icon {
                font-size: 40px;
                -webkit-text-fill-color: #00ff88;
            }
        }

        .score-panel {
            display: flex;
            justify-content: space-around;
            padding: 20px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            backdrop-filter: blur(10px);

            .score-item {
                text-align: center;
                position: relative;
                padding: 20px;
                border-radius: 8px;
                transition: all 0.3s ease;

                &:hover {
                    background: rgba(255, 255, 255, 0.1);
                    transform: translateY(-5px);
                }

                .score-value {
                    font-size: 36px;
                    font-weight: bold;
                    color: #00ff88;
                    margin-bottom: 10px;

                    &.pulse {
                        animation: pulse 2s infinite;
                    }
                }

                .score-label {
                    font-size: 16px;
                    color: #a0a0a0;
                }

                .trend {
                    position: absolute;
                    top: 10px;
                    right: 10px;
                    font-size: 14px;
                    padding: 4px 8px;
                    border-radius: 4px;

                    &.up {
                        color: #00ff88;
                        background: rgba(0, 255, 136, 0.1);
                    }

                    &.down {
                        color: #ff6b6b;
                        background: rgba(255, 107, 107, 0.1);
                    }
                }
            }
        }
    }

    .main-content {
        flex: 1;
        display: flex;
        gap: 20px;

        .left-panel, .right-panel {
            width: 400px;
            display: flex;
            flex-direction: column;
            gap: 20px;

            .panel-item {
                width: 100%;
                background: rgba(255, 255, 255, 0.1);
                border-radius: 10px;
                padding: 15px;
                backdrop-filter: blur(10px);
                height: calc(50% - 10px);

                .panel-title {
                    font-size: 18px;
                    margin-bottom: 15px;
                    color: #00ff88;
                    display: flex;
                    align-items: center;
                    gap: 8px;

                    .icon {
                        font-size: 24px;
                    }
                }

                .air-quality-chart,
                .water-quality-chart,
                .green-space-chart,
                .achievement-chart {
                    height: calc(100% - 80px);
                }
            }
        }

        .center-panel {
            flex: 1;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            padding: 20px;
            box-sizing: border-box;
            position: relative;
            backdrop-filter: blur(10px);

            .ecological-carousel {
                height: 100%;
                border-radius: 8px;
                overflow: hidden;

                :deep(.el-carousel__container) {
                    height: 100%;
                }

                :deep(.el-carousel__item) {
                    border-radius: 8px;
                    overflow: hidden;
                }

                .carousel-content {
                    height: 100%;
                    position: relative;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }

                    .carousel-caption {
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        right: 0;
                        padding: 20px;
                        background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
                        color: #fff;

                        h3 {
                            font-size: 24px;
                            margin-bottom: 10px;
                            color: #00ff88;
                        }

                        p {
                            font-size: 16px;
                            opacity: 0.9;
                        }
                    }
                }

                :deep(.el-carousel__arrow) {
                    background-color: rgba(0, 0, 0, 0.5);
                    border-radius: 50%;
                    width: 40px;
                    height: 40px;

                    &:hover {
                        background-color: rgba(0, 0, 0, 0.8);
                    }

                    i {
                        font-size: 20px;
                    }
                }

                :deep(.el-carousel__indicators) {
                    bottom: 20px;
                }

                :deep(.el-carousel__button) {
                    width: 12px;
                    height: 12px;
                    border-radius: 50%;
                    background-color: rgba(255, 255, 255, 0.5);

                    &:hover {
                        background-color: rgba(255, 255, 255, 0.8);
                    }
                }

                :deep(.el-carousel__indicator.is-active .el-carousel__button) {
                    background-color: #00ff88;
                }
            }

            .news-ticker {
                width: calc(100% - 20px);
                position: absolute;
                bottom: 20px;
                left: 50%;
                transform: translateX(-50%);
                background: rgba(0, 0, 0, 0.5);
                padding: 10px;
                overflow: hidden;
                border-radius:10px;

                .ticker-content {
                    display: flex;
                    animation: ticker 20s linear infinite;

                    .news-item {
                        margin-right: 50px;
                        white-space: nowrap;
                        color: #fff;
                        opacity: 0.8;
                        transition: opacity 0.3s ease;

                        &:hover {
                            opacity: 1;
                        }
                    }
                }
            }
        }
    }

    .footer-section {
        .news-panel {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            padding: 15px;
            backdrop-filter: blur(10px);

            .news-title {
                font-size: 18px;
                color: #00ff88;
                margin-bottom: 15px;
                display: flex;
                align-items: center;
                gap: 8px;

                .icon {
                    font-size: 24px;
                }
            }

            .news-content {
                display: flex;
                justify-content: space-between;

                .news-item {
                    flex: 1;
                    padding: 10px;
                    text-align: left;
                    border-right: 1px solid rgba(255, 255, 255, 0.1);
                    transition: all 0.3s ease;

                    &:hover {
                        background: rgba(255, 255, 255, 0.05);
                    }

                    &:last-child {
                        border-right: none;
                    }

                    .news-time {
                        display: block;
                        font-size: 12px;
                        color: #a0a0a0;
                        margin-bottom: 5px;
                    }

                    .news-text {
                        color: #fff;
                    }
                }
            }
        }
    }
}

.achievement-list {
    .achievement-item {
        display: flex;
        flex-direction: column;
        margin-bottom: 15px;
        padding: 10px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 5px;
        transition: all 0.3s ease;

        &:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        .achievement-title {
            color: #a0a0a0;
            margin-bottom: 5px;
        }

        .achievement-value {
            color: #00ff88;
            font-weight: bold;
            margin-bottom: 8px;
        }

        .progress-bar {
            height: 4px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 2px;
            overflow: hidden;

            .progress {
                height: 100%;
                background: linear-gradient(90deg, #00ff88, #00a1ff);
                border-radius: 2px;
                transition: width 1s ease;
            }
        }
    }
}

@keyframes ticker {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}
</style>